<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯</title>
		<!-- 顶部高200px 宽100%
		 吸顶灯 高20px 宽100% 背景颜色自定
		 底部 假文-->
		
		 <style>
			 *{
				 padding: 0;
				 margin: 0;
			 }
			 /* 顶部效果*/
			 .top_content{
				 height: 200px;
				 width: 100%;
				 text-align: center;
				 background-color: #eee;
			 }
			 /* 吸顶灯效果 默认情况*/
			 .sticky{
				 height: 50px;
				 background-color: skyblue;
				 line-height: 50px;
				 text-align: center;
				 color: #fff;
			 }
			 /* 页面主区域*/
			 .main_content{
				 height: 8000px;
				 background-color: #eee;
			 }
			 /* 吸顶灯效果:定死页面顶部效果*/
			 .ac{
				 position: fixed;
				 top: 0;
				 width: 100%;
			 }
		 </style>
		  <script src="../js/jquery-1.11.1.js"></script>
		 <script>
			 $(function(){
				 //JQ相关操作  思路：滚动下拉条，超过200px，吸顶灯定死在页面顶端
				 //超过200px  固定>滚动 吸顶灯通过添加样式操作：定死在页面上
				 //固定值：获取到达吸顶灯位置的偏移量
				 //offset() 获取或者设置元素相对于文档的偏移量
				 //.top 获取文档body顶部
				 var so=$(".sticky").offset().top;
				 
				 //$(window) 来监听窗口的事件：滚动、窗口试图大小
				 //scroll()监听页面滚动事件
				 $(Window).scroll(function(){
					 //1.获取页面滚动值：动态值
					 var st =$(window).scrollTop()
					  //2.超过200px：动态值>固定值200px 条件满足：页面吸顶灯样式定死
					  if(st>so){
						  $(".sticky").addClass("ac");
					  }else{
						  $(".sticky").removeClass("ac");
					  }
				 })

				 
			 });
		 </script>
	</head>
	<body>
		<div class="top_content">顶部</div>
		<div class="sticky">吸顶灯</div>
		<div class="main_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta eligendi neque quisquam, dolorum reiciendis officia odio amet nulla, quas ipsa, aliquid quo fuga ut dolore. Dignissimos autem natus nostrum obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste aut impedit expedita harum. Doloribus doloremque tenetur tempora recusandae quisquam. Dicta eaque vero mollitia aliquid quos laudantium maxime repellat atque corrupti. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, perspiciatis exercitationem vel accusamus illum earum quaerat facilis nemo sapiente aspernatur doloribus ratione, impedit debitis amet! Perferendis, possimus! Facere, quae dolor.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed adipisci tempore alias inventore, deleniti dolores consequuntur, aspernatur temporibus amet ad nulla distinctio saepe in blanditiis beatae molestiae, perferendis ex porro?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint officia voluptate animi nihil necessitatibus dolorem, doloremque natus, enim, nam vero quam tenetur laborum commodi voluptates veritatis facere odio exercitationem porro.</div>
	</body>
</html>